<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

        <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
        <!-- editor themes -->
        <link rel="stylesheet" href="https://codemirror.net/theme/3024-day.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/3024-night.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/abbott.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/abcdef.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/ambiance-mobile.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/ambiance.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/ayu-dark.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/ayu-mirage.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/base16-dark.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/base16-light.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/bespin.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/blackboard.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/cobalt.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/colorforth.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/darcula.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/dracula.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/duotone-dark.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/duotone-light.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/eclipse.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/elegant.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/erlang-dark.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/gruvbox-dark.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/hopscotch.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/icecoder.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/idea.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/isotope.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/juejin.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/lesser-dark.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/liquibyte.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/lucario.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/material-darker.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/material-ocean.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/material-palenight.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/material.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/mbo.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/mdn-like.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/midnight.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/monokai.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/moxer.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/neat.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/neo.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/night.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/nord.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/oceanic-next.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/panda-syntax.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/paraiso-dark.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/paraiso-light.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/pastel-on-dark.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/railscasts.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/rubyblue.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/seti.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/shadowfox.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/solarized.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/ssms.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/the-matrix.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/tomorrow-night-bright.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/tomorrow-night-eighties.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/ttcn.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/twilight.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/vibrant-ink.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/xq-dark.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/xq-light.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/yeti.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/yonce.css">
        <link rel="stylesheet" href="https://codemirror.net/theme/zenburn.css">
        <!-- addon styling -->
        <link rel="stylesheet" href="https://codemirror.net/addon/dialog/dialog.css">
        <link rel="stylesheet" href="https://codemirror.net/addon/display/fullscreen.css">
        <link rel="stylesheet" href="https://codemirror.net/addon/fold/foldgutter.css">
        <link rel="stylesheet" href="https://codemirror.net/addon/search/matchesonscrollbar.css">
        <link rel="stylesheet" href="https://codemirror.net/addon/scroll/simplescrollbars.css"></link>
        <title>Code Mirror</title>
    </head>
    <body style="background-color: {{ EDITOR_BACKGROUND_COLOR }}">
        <!-- core javascript source -->
        <script src="https://codemirror.net/lib/codemirror.js"></script>
        <!-- addons -->
        <script src="https://codemirror.net/addon/comment/comment.js"></script>
        <script src="https://codemirror.net/addon/comment/continuecomment.js"></script>
        <script src="https://codemirror.net/addon/dialog/dialog.js"></script>
        <script src="https://codemirror.net/addon/wrap/hardwrap.js"></script>
        <script src="https://codemirror.net/addon/display/autorefresh.js"></script>
        <script src="https://codemirror.net/addon/display/fullscreen.js"></script>
        <script src="https://codemirror.net/addon/display/panel.js"></script>
        <script src="https://codemirror.net/addon/display/placeholder.js"></script>
        <script src="https://codemirror.net/addon/display/rulers.js"></script>
        <script src="https://codemirror.net/addon/fold/brace-fold.js"></script>
        <script src="https://codemirror.net/addon/fold/comment-fold.js"></script>
        <script src="https://codemirror.net/addon/fold/foldcode.js"></script>
        <script src="https://codemirror.net/addon/fold/foldgutter.js"></script>
        <script src="https://codemirror.net/addon/fold/indent-fold.js"></script>
        <script src="https://codemirror.net/addon/fold/markdown-fold.js"></script>
        <script src="https://codemirror.net/addon/fold/xml-fold.js"></script>
        <script src="https://codemirror.net/addon/search/jump-to-line.js"></script>
        <script src="https://codemirror.net/addon/search/match-highlighter.js"></script>
        <script src="https://codemirror.net/addon/search/matchesonscrollbar.js"></script>
        <script src="https://codemirror.net/addon/search/search.js"></script>
        <script src="https://codemirror.net/addon/search/searchcursor.js"></script>
        <script src="https://codemirror.net/addon/scroll/annotatescrollbar.js"></script>
        <script src="https://codemirror.net/addon/scroll/scrollpastend.js"></script>
        <script src="https://codemirror.net/addon/scroll/simplescrollbars.js"></script>
        <!-- language highlighting scripts -->
        <script src="https://codemirror.net/mode/javascript/javascript.js"></script>
        <script src="https://codemirror.net/mode/python/python.js"></script>
        <div style="margin-left: auto; margin-right: auto;">
            <textarea id="codemirror">
                {{ CODE_FILE_CONTENT }}
            </textarea>
            <p>Select a theme: <select onchange="selectTheme()" id=select>
                <option selected>default</option>
                <option>3024-day</option>
                <option>3024-night</option>
                <option>abbott</option>
                <option>abcdef</option>
                <option>ambiance</option>
                <option>ayu-dark</option>
                <option>ayu-mirage</option>
                <option>base16-dark</option>
                <option>base16-light</option>
                <option>bespin</option>
                <option>blackboard</option>
                <option>cobalt</option>
                <option>colorforth</option>
                <option>darcula</option>
                <option>dracula</option>
                <option>duotone-dark</option>
                <option>duotone-light</option>
                <option>eclipse</option>
                <option>elegant</option>
                <option>erlang-dark</option>
                <option>gruvbox-dark</option>
                <option>hopscotch</option>
                <option>icecoder</option>
                <option>idea</option>
                <option>isotope</option>
                <option>juejin</option>
                <option>lesser-dark</option>
                <option>liquibyte</option>
                <option>lucario</option>
                <option>material</option>
                <option>material-darker</option>
                <option>material-palenight</option>
                <option>material-ocean</option>
                <option>mbo</option>
                <option>mdn-like</option>
                <option>midnight</option>
                <option>monokai</option>
                <option>moxer</option>
                <option>neat</option>
                <option>neo</option>
                <option>night</option>
                <option>nord</option>
                <option>oceanic-next</option>
                <option>panda-syntax</option>
                <option>paraiso-dark</option>
                <option>paraiso-light</option>
                <option>pastel-on-dark</option>
                <option>railscasts</option>
                <option>rubyblue</option>
                <option>seti</option>
                <option>shadowfox</option>
                <option>solarized dark</option>
                <option>solarized light</option>
                <option>the-matrix</option>
                <option>tomorrow-night-bright</option>
                <option>tomorrow-night-eighties</option>
                <option>ttcn</option>
                <option>twilight</option>
                <option>vibrant-ink</option>
                <option>xq-dark</option>
                <option>xq-light</option>
                <option>yeti</option>
                <option>yonce</option>
                <option>zenburn</option>
            </select>
            </p>
        </div>
        <!-- <script src="{{ JQUERY_JS }}"></script> -->
        <!-- <script src="jquery.js"></script> -->
        <!-- <script src="{{ MINIMAP_MIN_JS }}"></script> -->
        <!-- <script src="pagemap-1.4.0.min.js"></script> -->
        <!-- <script src="minimap.js"></script> -->
        <script>
            var editor = CodeMirror.fromTextArea(document.getElementById("codemirror"), {
                value: "function myScript(){return 100;}\n",
                lineNumbers: true,
                electricChars: true,
                lineSeparator: null,
                mode:  "text/x-python",
                indentUnit: 4,
                foldGutter: true,
                gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
                // mode: "htmlmixed",
                smartIndent: true,
                theme: "abcdef",
            });
            editor.setSize(800, 600);
            editor.setOption('viewportMargin', Infinity);
            var input = document.getElementById("select");
            function selectTheme() {
                var theme = input.options[input.selectedIndex].textContent;
                editor.setOption("theme", theme);
                location.hash = "#" + theme;
            }
            var choice = (location.hash && location.hash.slice(1)) ||
                        (document.location.search &&
                            decodeURIComponent(document.location.search.slice(1)));
            if (choice) {
                input.value = choice;
                editor.setOption("theme", choice);
            }
            CodeMirror.on(window, "hashchange", function() {
                var theme = location.hash.slice(1);
                if (theme) { input.value = theme; selectTheme(); }
            });

        </script>
        <script>
            // Only run on browsers that support css transitions
            // See also example.css:15
            if(Modernizr.csstransforms) {
                $(document).ready(function() {
                    $.sublimeScroll({
                        top: 20, // px to top
                        bottom: 40, // px to bottom
                        scrollWidth: 200, // Width of scrollbar
                        removeElements: 'script',
                        fixedElements: 'header.top, footer.bottom',
                        contentWidth: 860, // Scroll viewport width
                        contentHeight: 1000,
                        minWidth: 1000 // Min width of window to display scroll
                    });
    
                    $('#content2').sublimeScroll({
                        contentWidth: 583
                    });
                });
            }
        </script>
    </body>
</html>